<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}
	.btn:hover {
        background: #ddd;
        color: #333;
    }
    
    .btn:active {
        background: #aaa;
    }

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}
	
	.line-animation2 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.la-line {
    stroke-width: 1px;
    stroke: #000;
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: dash 0.5s ease-in forwards;
}

.la-line2 {
    stroke-width: 1px;
    stroke: #000;
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: dash 0.5s ease-out 0.5s forwards;
}

.la-rect {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: dash 0.5s linear 1s forwards;
}

.la-circle {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: dash 0.5s ease-in 1s forwards;
}

.la-rect2 {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: -720;
    animation: dash 1s ease-out 1s forwards;
}

.la-circle2 {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: -720;
    animation: dash 1s linear 1s forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
	
	


.circle-load-svg {
    stroke-dasharray: 0 570;
    animation: rot 8s linear infinite;
}

@keyframes rot {
    100% {
        stroke-dasharray: 570 570;
    }
}
	
	
	body{
    font-size:10px;
}









/*线条进度动画*/
.circle-load {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.container{
    width: 100%;    
}
.line-wrap{
    width:300px;
    margin:0 auto;
}
.circle-load-rect-svg{
    margin: 10px;
}
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}
/*线条进度动画*/

</style>
</head>

<body>
	<!-- <input id="stop" type="radio" name="playAnimation"/>
	<input id="play" type="radio" name="playAnimation"/>

	<div class="box">
		<label for="stop">
			<div class="btn">stop</div>
		</label>
		<label for="play">
			<div class="btn">play</div>
		</label>
	</div>
	<div class="animation"></div> -->
	
<!--	多 SVG 图形线条动画配合-->
<!-- 	<hgroup class="line-animation2">  
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
			<line x1="0" y1="0" x2="200" y2="200" class="la-line"></line>
			<line x1="200" y1="0" x2="0" y2="200" class="la-line"></line>
			<line x1="100" y1="10" x2="100" y2="190" class="la-line2"></line>
			<line x1="10" y1="100" x2="190" y2="100" class="la-line2"></line>
			<rect x="10" y="10" width="180" height="180" rx="20" ry="20" class="la-rect"></rect>
			<circle cx="100" cy="100" r="80" class="la-circle"></circle>
			<rect x="50" y="50" width="100" height="100" rx="20" ry="20" class="la-rect2"></rect>
			<circle cx="100" cy="100" r="40" class="la-circle2"></circle>
		</svg>
	</hgroup> -->
	
<!--	SVG 线条动画实现圆形进度条-->
	<hgroup class="circle-load">
	    <!-- <svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
	        <circle cx="110" cy="110" r="90" stroke-width="20" stroke="gainsboro" fill="none"></circle>
	        <circle cx="110" cy="110" r="90" stroke-width="20" stroke="darkturquoise" fill="none" class="circle-load-svg"></circle>
	    </svg> -->
	    
	    
		<!--    SVG 线条动画-->
		<!-- <div class="container">
		    <div class="line-wrap"> -->
		        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
		            <polyline points="5 5, 575 5, 575 200, 5 200, 5 5" fill="none" class="g-rect-path"/>
		            <polyline points="5 5, 575 5, 575 200, 5 200, 5 5" fill="none" class="g-rect-fill"/>
		        </svg>
		<!--     </div>
		</div> -->
	</hgroup>
</body>
</html>
